<template>
	<!-- <view class="u-page"> -->
	<view class="content">
		<view class="item-head">
			<view class="title1">仅用于全国公民身份查询中心核实身份</view>
			<view class="title2">拍摄时请确保身份证边框完整、字迹清晰、亮度均衡</view>
		</view>
		<view class="positive" @click="uploadImg(1)">
		
			<view class="file-picker__box" v-if="hasCard1">
				<image :src="idcard.zhenmian" mode=""></image>
			</view>
			<view class="file-picker__box2" v-else>
				<image src="../../../static/icon/idpositive.png" mode=""></image>
			</view>

			<view class="shibie">
				<view class="shibieimg">
					<image src="../../../static/icon/shibie.png" mode=""></image>
				</view>
				<view class="shibietxt" v-show="!hasCard1"><text>点击识别身份证正面</text><text class="active_text">照片面</text> </view>
			</view>
		</view>
		<view class="positive" @click="uploadImg(2)">
			<view class="file-picker__box" v-if="hasCard2">
				<image :src="idcard.bark" mode=""></image>
			</view>
			<view class="file-picker__box2" v-else>
				<image src="../../../static/icon/idback.png" mode=""></image>
			</view>
			<view class="shibie">
				<view class="shibieimg">
					<image src="../../../static/icon/shibie.png" mode=""></image>
				</view>
				<view class="shibietxt" v-show="!hasCard2"><text>点击识别身份证背面</text><text class="active_text">国徽面</text> </view>
			</view>
		</view>
		<view class="formdata">
			<view class="listLable">
				<view class="label">姓名</view>
				<view class="name">{{formData.username}}</view>
			</view>
			<view class="listLable">
				<view class="label">身份证号</view>
				<view class="name">{{formData.idCard}}</view>
			</view>
			<view class="listLable">
				<view class="label">签发机关</view>
				<view class="name">{{formData.idTime}}</view>
			</view>
			<view class="listLable">
				<view class="label">有效期</view>
				<view class="name">{{formData.idLssue}}</view>
			</view>
			<view class="yanzheng">
				<button class="default_btn" v-if="buts !=true ">验证</button>
				<button type="warn" v-else @click="subIdcard()">验证</button>
			</view>
		</view>
	</view>
	<!-- </view> -->
</template>

<script>
	export default {
		data() {
			return {
				buts: false,
				token: '',
				qiniuaddr: this.QiniuUrl,
				idcard: {
					'zhenmian': "",
					"bark": ""
				},
				formData: {
					"username": '-------',
					"idCard": '-------',
					"idTime": '-------',
					"idLssue": '-------'

				},
				hasCard1: false,
				hasCard2: false
			}
		},
		async onLoad() {
			this.QiniuToken();
			// this.juheIdOCR('http://r7jydbhly.hn-bkt.clouddn.com/yssl/idcard/1646906796400zfjKd8QKkwxUc11915f3cb98dccde8630e2d2fd4afe2.jpg',1);
		},
		methods: {
			QiniuToken() {
				const token = uni.request({
					url: this.HttpServe + '/Welcome/QiniuToken',
					method: 'post',
					success: (res) => {
						this.token = res.data.data;
					}
				})
			},
			uploadImg(e) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						let a = res
					
						this.upload(res.tempFiles, e)
					}
				});
			},
			upload(imgPath, e) {
				let _this = this
				var time = new Date().getTime();
				imgPath.forEach(function(item, index, array) {
					const filename = 'yssl/idcard/' + time + item.path.replace(/.*(\/|\\)/, "");
					uni.uploadFile({
						url: 'http://upload-z2.qiniup.com',
						name: 'file',
						filePath: item.path,
						header: {
							"Content-Type": "multipart/form-data"
						},
						formData: {
							token: _this.token, //后端返回的token
							key: filename,
						},
						success: function(res) {
							console.log(1111111111,e)
							if (e === 1) {
								_this.hasCard1 = true
							}
							if (e === 2) {
								_this.hasCard2 = true
							}
							let key = JSON.parse(res.data).key;
							_this.juheIdOCR(_this.qiniuaddr + "/" + key, e)
							if (e == "1") {
								_this.idcard.zhenmian = _this.qiniuaddr + "/" + key;
							} else {
								_this.idcard.bark = _this.qiniuaddr + "/" + key;
							}
						},
						fail: function(res) {
							console.log(res)
						}
					});
				})

			},
			//聚合识别
			juheIdOCR(file, type) {
				let that = this
				uni.request({
					url: that.HttpServe + "/Api/idCardOcr",
					method: "post",
					data: {
						file: file,
						type: type
					},
					success(res) {
						console.log('res--', res)
						if (res.data.code != '200') {
							uni.showToast({
								title: '识别失败',
								icon: 'error',
								duration: 3000
							});
						} else {
							let data = res.data.data
							console.log('1--', data)
							if (type == 1) {
								that.formData.username = data.realname
								that.formData.idCard = data.idcard
							} else {
								that.formData.idTime = data.begin + '-' + data.end
								that.formData.idLssue = data.department
								that.buts = true;
							}
							console.log('111', data);
						}

					}
				})
			},
			//验证
			subIdcard() {
				let that = this
				uni.request({
					url: that.HttpServe + "/Api/IdCardReal",
					method: "post",
					data: {
						realname: that.formData.username,
						idcard: that.formData.idCard
					},
					success(res) {
						if (res.data.code == 200) {
							that.usersdata()
						} else {
							uni.showToast({
								title: '验证失败',
								icon: 'error',
								duration: 3000
							});
						}
					}
				})
			},
			//修改用户x信息
			async usersdata() {
				this.formData.idAttestation = '1'
				this.formData.idCardPic = JSON.stringify(this.idcard)
				const user = await this.GQL({
					"operationName": "updateSlUserByUid",
					"query": "mutation updateSlUserByUid($input: UpdateSlUserByUidInput!) { updateSlUserByUid(input: $input) { slUser { uid phoneAttestation } } }",
					"variables": {
						"input": {
							"uid": uni.getStorageSync('userData').uid,
							"slUserPatch": this.formData
						}
					}
				})
				if (user.data.updateSlUserByUid.slUser != '') {
					uni.navigateTo({
						url: "/pages/project/investment/idcardsuccessful"
					})
				}
			}


		}
	}
</script>

<style lang="scss">
	.content {
		margin: 16px;

		// background-color: #FBFCFE;
		.item-head {
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 16px;

			.title1 {
				margin: 10px 0px;
				color: #9BA7C1;

			}

			.title2 {
				color: #161E3E;
			}
		}

		.positive {
			height: 180px;
			background-color: #FBFCFE;
			border-radius: 5px;
			margin: 12px 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			box-shadow: 4rpx;
			box-shadow: 8rpx 8rpx 8rpx 8rpx rgba(0, 0, 0, 0.1);

			// padding: 12px 36px 24px 37px;
			.file-picker__box {
				width: 100%;
				image {
					width: 100%;
					height: 180px;
				}
			}

			.file-picker__box2 {
				position: absolute;
				top: 12px;
				right: 36px;
				bottom: 12px;
				left: 37px;
				border: 1px dashed #c6c6c6;
				margin: auto;
				width: 270px;

				image {
					width: 270px;
					height: 160px;
				}
			}

			.shibie {
				position: absolute;
				margin: auto;
				text-align: center;

				// padding-top: 20px;
				image {
					width: 47px;
					height: 45px;
				}

				.shibietxt {
					margin-top: 20px;
				}

				.active_text {
					color: #C7171E;
					margin-left: 4px;
				}
			}

		}

		.formdata {
			margin-top: 28px;

			.listLable {
				display: flex;
				height: 30px;
				margin: 5px 0px;
				font-size: 15px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #161E3E;
				line-height: 16px;
			}

			.label {
				width: 100px;
			}

			.name {
				font-size: 15px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #767B8D;
				line-height: 16px;
			}
		}

		.yanzheng {
			.default_btn {
				background-color: #DCE2EF;
				color: #fff;
			}
		}
	}
</style>
